<template>
  <!-- 公告展示  -->
  <el-card class="tableBox">
    <template #header>
      <div class="card-header">
        <span>最新公告</span>
      </div>
    </template>
    <NoticeCard
      v-for="item in noticeList"
      :key="item.id"
      :title="item.title"
      :content="item.content"
      :type="item.type"
    />
  </el-card>
  <!--  公告列表展示 -->
  <el-card class="tableBox">
    <template #header>
      <div class="card-header">
        <span>公告管理</span>
        <el-button
          class="button"
          type="primary"
          @click="dialogFormVisible = true"
          >发布公告</el-button
        >
      </div>
    </template>
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column type="expand">
        <template #default="props">
          <div class="noticeBox">
            <h2>公告内容</h2>
            <p>{{ props.row.content }}</p>
            <div class="imgBox">
              <img
                v-for="(item, index) in JSON.parse(props.row.imgs)"
                :src="item"
                :key="index"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="updateTime" label="更新日期" />
      <el-table-column label="公告状态">
        <template #default="props">
          <el-tag class="ml-2" :type="tagMap[props.row.status]?.type">{{
            tagMap[props.row.status]?.info
          }}</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column fixed="right" label="操作" width="120px">-->
      <!--        <template #default="scope">-->
      <!--          <el-button type="error" @click.prevent="deleteRow(scope.$index)">-->
      <!--            删除-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <div class="paginationBox">
      <!-- :total="400" -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 新增公告对话框 -->
  <el-dialog v-model="dialogFormVisible" title="公告信息">
    <el-form :model="form">
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="form.status" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-input v-model="form.type" />
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth">
        <el-input v-model="form.content" :rows="3" type="textarea" />
      </el-form-item>
      <!-- 添加图片 -->
      <el-form-item label="添加图片" :label-width="formLabelWidth">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          ref="uploadRef"
          :on-change="onPictureChange"
          :on-remove="onPictureChange"
        >
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span
                  v-if="!disabledImg"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addNotice"> 添加公告 </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 图片展示dialog -->
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useNoticeStore } from "@/store/modules/notice";
import NoticeCard from "@/views/welcome/components/NoticeCard.vue";
import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
import type { UploadFile, UploadFiles } from "element-plus";
import { message } from "@/utils/message";

const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  loadingInfo();
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  loadingInfo();
};

// 获取公告信息
const noticeStore = useNoticeStore();
let loading = true;
const tableData = ref([]);
const noticeList = ref([]);
const total = ref(100);

// 类型信息
const tagMap = {
  0: {
    info: "正常",
    type: "success"
  },
  1: {
    info: "禁用",
    type: "danger"
  }
};

async function loadingInfo() {
  await noticeStore.getNoticeInfo(currentPage.value, pageSize.value);
  loading = false;
  tableData.value = noticeStore.noticeList;
  noticeList.value = noticeStore.noticeList.slice(0, 3);
  total.value = noticeStore.total;
}
loadingInfo();

// 对话框表单相关
const dialogFormVisible = ref(false);
const formLabelWidth = "100px";
const form = reactive({
  title: "",
  type: "",
  content: "",
  updateTime: "",
  status: "0"
});
const options = [
  {
    value: "0",
    label: "正常"
  },
  {
    value: "1",
    label: "禁用"
  }
];

// 上传图片操作
const uploadRef = ref<any>(null);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabledImg = ref(false);
const pictures = ref<UploadFiles>([]);

const handleRemove = (file: UploadFile) => {
  uploadRef.value.handleRemove(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};

const onPictureChange = (file: UploadFile, files: UploadFiles) => {
  pictures.value = files;
};

// 提交表单
const addNotice = () => {
  const dataUrlList = [];
  pictures.value.map(x => {
    const reader = new FileReader();
    reader.onload = function () {
      dataUrlList.push(reader.result);
      if (dataUrlList.length == pictures.value.length) pushNotice(dataUrlList);
    };
    reader.readAsDataURL(x.raw);
  });
};

const pushNotice = dataUrlList => {
  message("上传中");
  noticeStore.addNoticeInfo({
    ...form,
    imgs: dataUrlList.map(x => {
      return x.split(",")[1];
    })
  });
  dialogFormVisible.value = false;
  form.title = "";
  form.type = "";
  form.content = "";
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tableBox {
  margin-top: 20px;
}

.paginationBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.noticeBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.noticeBox > p {
  text-indent: 2em;
  padding: 20px;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.imgBox > img {
  /*background-color: #406eeb;*/
  border-radius: 18px;
  height: 200px;
  margin: 5px 5px;
}

.uploadBox {
  width: 300px;
  height: 300px;
}
</style>
